Flex Layout দিয়ে রেসপন্সিভ লেআউট

Web Development - অ্যাঙ্গুলার ম্যাটেরিয়াল (Angular Material) - Angular Material লেআউট |

Angular Flex Layout হলো একটি powerful লাইব্রেরি যা CSS Flexbox এবং CSS Grid এর উপর ভিত্তি করে রেসপন্সিভ লেআউট তৈরি করতে সহায়ক। এটি Angular অ্যাপ্লিকেশনের জন্য একটি declarative API সরবরাহ করে, যা ডেভেলপারদের সহজে এবং দ্রুত ফ্লেক্সবক্স এবং গ্রিড সিস্টেম ব্যবহার করতে সহায়তা করে। Angular Material এর সাথে ফ্লেক্স লেআউট ব্যবহারের মাধ্যমে, আপনি আপনার অ্যাপ্লিকেশনে রেসপন্সিভ এবং ডাইনামিক ডিজাইন তৈরি করতে পারবেন।

Flex Layout এর মূল ধারণা

Flexbox এবং Grid দুটি জনপ্রিয় লেআউট মডেল যা ব্রাউজারগুলিতে সহজে রেসপন্সিভ ডিজাইন তৈরি করার জন্য ব্যবহৃত হয়। Flex Layout লাইব্রেরি Angular অ্যাপ্লিকেশনে এই প্রযুক্তিগুলির সুবিধা নিয়ে আসে। Flex Layout ডিভাইস বা স্ক্রীন সাইজ অনুযায়ী অ্যাপ্লিকেশন ডিজাইন পরিবর্তন করতে সাহায্য করে, যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।

Angular Flex Layout ইন্সটল করা

এটি ব্যবহার করতে প্রথমে Angular Flex Layout লাইব্রেরিটি ইনস্টল করতে হয়। নিচের কমান্ডটি ব্যবহার করে এটি ইন্সটল করতে পারেন:

npm install @angular/flex-layout

Flex Layout Module ইমপোর্ট করা

app.module.ts ফাইলে Flex Layout মডিউল ইমপোর্ট করতে হবে:

import { FlexLayoutModule } from '@angular/flex-layout';

@NgModule({
  imports: [
    FlexLayoutModule
  ]
})
export class AppModule { }

Flex Layout Directive

Flex Layout লাইব্রেরিতে Flexbox এবং Grid এর উপর ভিত্তি করে তৈরি কিছু ডিরেকটিভ আছে, যার মাধ্যমে আপনি সহজেই আপনার লেআউট কাস্টমাইজ করতে পারবেন।

১. fxLayout:

এই ডিরেকটিভটি কন্টেইনারের লেআউট নিয়ন্ত্রণ করে (যেমন, row অথবা column)।

উদাহরণ:

<div fxLayout="row" fxLayoutGap="10px">
  <div fxFlex>Item 1</div>
  <div fxFlex>Item 2</div>
  <div fxFlex>Item 3</div>
</div>

এই উদাহরণে, fxLayout="row" ডিরেকটিভ কন্টেইনারকে একটি রো লেআউট দেয় এবং fxLayoutGap="10px" ব্যবহৃত হয়েছে যাতে আইটেমগুলির মধ্যে ১০px স্পেস থাকে।

২. fxFlex:

এই ডিরেকটিভটি ফ্লেক্স আইটেমের সাইজ নিয়ন্ত্রণ করে। আপনি এটিকে সুনির্দিষ্ট প্রস্থ, উচ্চতা বা অনুপাত ভিত্তিক ব্যবহার করতে পারেন।

উদাহরণ:

<div fxLayout="row">
  <div fxFlex="25%">Item 1</div>
  <div fxFlex="50%">Item 2</div>
  <div fxFlex="25%">Item 3</div>
</div>

এখানে, fxFlex="25%" এবং fxFlex="50%" এর মাধ্যমে আইটেমগুলির প্রস্থ নিয়ন্ত্রণ করা হয়েছে।

৩. fxLayoutAlign:

এই ডিরেকটিভটি লেআউটের মধ্যে কন্টেন্টের এলাইনমেন্ট নিয়ন্ত্রণ করে। যেমন, justify-content এবং align-items এর মতো CSS বৈশিষ্ট্যগুলি সরাসরি ব্যবহার করা যায়।

উদাহরণ:

<div fxLayout="row" fxLayoutAlign="center center">
  <div fxFlex>Item 1</div>
  <div fxFlex>Item 2</div>
  <div fxFlex>Item 3</div>
</div>

এখানে, fxLayoutAlign="center center" কন্টেন্টগুলোকে কেন্দ্রিকভাবে সাজাবে।

৪. fxShow এবং fxHide:

এই ডিরেকটিভগুলি ব্যবহার করে বিভিন্ন স্ক্রীন সাইজ অনুযায়ী কন্টেন্ট শো বা হাইড করা যায়। এটি মোবাইল, ট্যাবলেট বা ডেস্কটপের জন্য রেসপন্সিভ লেআউট তৈরি করতে ব্যবহৃত হয়।

উদাহরণ:

<div fxLayout="row">
  <div fxFlex fxShow="sm">Visible on small screens</div>
  <div fxFlex fxHide="sm">Hidden on small screens</div>
</div>

এখানে, fxShow="sm" এবং fxHide="sm" ডিরেকটিভ ব্যবহার করে ছোট স্ক্রীনে কন্টেন্ট শো বা হাইড করা হয়েছে।